$(function () {
  init();

  function init() {
    mui.init({
      pullRefresh: {
        container: "#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
        down: {
          height: 50,//可选,默认50.触发下拉刷新拖动距离,
          auto: true,//可选,默认false.首次加载自动下拉刷新一次
          contentdown: "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
          contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
          contentrefresh: "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
          callback: function () {

            queryCart(function (result) {
              // result 是个普通的数组

              var html = template("itemTpl", { data: result });
              $("#OA_task_2").html(html);

              mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
            })
          }
        }
      }
    });


    // 绑定复选框-计算总金额
    // tap 还没有勾选上 就已经触发了 
    // change 值改变之后再触发 
    /* 
    计算总额分析:
    1 给所有的复选框绑定 change  要使用事件委托的方式绑定(因为复选框是动态生成)
    2 获取到所有的已经勾选上的复选框 
    3 获取复选框所在的 商品的价格和数量 
    4 做总价格的运算就可以了
    
     */
    $("#OA_task_2").on("change", ".chkInp", function () {
      // console.log(123);
      // 获取页面中已经勾选了的复选框
      var chkList = $("#OA_task_2 .chkInp:checked");
      // console.log(chkList.length);

      // 总额
      var totalPrice = 0;

      for (var i = 0; i < chkList.length; i++) {

        // var price=chkList[i].parents(".mui-table-view-cell")
        var jsonObj = $(chkList[i]).parents(".mui-table-view-cell")[0].dataset.obj;
        // console.log(jsonObj);
        var obj = JSON.parse(jsonObj);

        // console.log(obj);
        // 获取 单个的价格
        var price = obj.price;
        // 获取 数量 
        var num = obj.num;

        totalPrice += price * num;
      }

      // 把总额写到 span标签上
      $(".order_total_price").html("订单总额:￥" + totalPrice + "");

    });


    // 删除单个商品
    /* 
    1 给所有的删除按钮绑定tap  事件委托的方式
    2 先弹出对话框
    3 先获取被删除的商品的id ->li data-obj 属性 
    4 需要把id 转为数组 再发送请求 (要使用$.ltAjax发送)
    5 删除成功 刷新 手动触发下拉刷新 就可以l 
     */

    $("#OA_task_2").on('tap', ".deleteBtn", function () {
      //  console.log("我被删除了");
      // that 就是被点击的删除按钮
      var that = this;
      mui.confirm("确定删除吗?", "警告", ["是", "否"], function (a) {
        if (a.index == 0) {
          // 是
          // this不一定是 删除按钮 
          var jsonObj = $(that).parents(".mui-table-view-cell")[0].dataset.obj;
          var obj = JSON.parse(jsonObj);
          var id = obj.id;
          // console.log(id);

          // 发送删除请求
          deleteCart(id);
        } else if (a.index == 1) {
          // 否
        }

      })
    })

    // 编辑商品
    /* 
    编辑商品:
    1 绑定事件
    2 获取被点击的商品的 尺码 选择的数量 id 
    3 动态渲染数据- 在mui-confirm里面渲染的
    4 把选择中的参数 发送到后台
    5 编辑成功->手动触发下拉刷新

     */
    $("#OA_task_2").on("tap", ".editBtn", function () {
      // console.log(1234);
      var that = this;
      var jsonObj = $(that).parents(".mui-table-view-cell")[0].dataset.obj;
      var obj = JSON.parse(jsonObj);

      // 给obj增加一个属性 sizeArr=[40,41,,,,50]
      obj.sizeArr = $.sizeFormat(obj.productSize);
      // console.log(obj);

      // 生成编辑框里面的数据  
      var html = template("editTpl", obj);
      console.log(obj);
      //                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
      html = html.replace(/\n/g, "");
      mui.confirm(html, "编辑", ["是", "否"], function (a) {
        if (a.index == 0) {
          // 是

          var updataObj={
            id:obj.id,
            size:$(".pro_size span.active").html(),
            num:$(".mui-numbox-input").val()
          };

          // 发送修改
          updateCart(updataObj);

        } else if (a.index == 1) {
          // 否
        }

      })

      // 初始化数字输入框
      mui(".mui-numbox").numbox();
    });


    // 点击尺码 要使用事件委托的方式 因为span标签是动态渲染
    $("body").on("tap", ".pro_size span", function () {
      $(this).addClass("active").siblings().removeClass("active");
      // console.log(123);

    });
  }


  // 查询购物车
  function queryCart(callback) {
    $.ltAjax({
      url: "/cart/queryCart",
      success: function (result) {
        // console.log(result);
        callback && callback(result);
      }
    });

  }

  // 根据id去删除数据
  // ids 是一个数组???需要和后台去沟通 
  // 因为后台的设置问题
  // 传的id 可以是单个元素 也可以是长度为1 数组
  function deleteCart(id) {
    var arr = [id];
    // var arrJson=JSON.stringify(arr);
    var obj = { "id": arr }
    $.ltAjax({
      url: "/cart/deleteCart",
      data: obj,
      success: function (result) {
        // console.log(result);
        // 手动启用刷新组件
        mui("#refreshContainer").pullRefresh().pulldownLoading();
      }
    });
  }

  // 修改购物车
  function updateCart(data) {
    $.ltAjax({
      url:"/cart/updateCart",
      type:"post",
      data:data,
      success:function (result) {
        if(result.success){
          // 手动触发下拉刷新
          mui("#refreshContainer").pullRefresh().pulldownLoading();
        }else{
          console.log(result);
        }
      }
    });
    
  }

  // 让template 插件 认识 我们自己定义的方法 
  // 让template提供了一个接口 让我们可以往里面注册方法
  // template.helper("在插件中使用的方法名","我们在js里面定义的方法")
  template.helper("objToJson", function (value) {
    return JSON.stringify(value);
  });



})